import React, { Component } from 'react';
import { Switch } from 'react-native-switch';
import PropTypes from 'prop-types';
import { px2dp } from 'bee/utils/px2dp';

export default class CustomSwitch extends Component {
  render() {
    const {
      onValueChange,
      activeText,
      inActiveText,
      showText,
      ...props
    } = this.props;
    return (
      <Switch
        value={this.props.value}
        onValueChange={value => {
          onValueChange(value);
        }}
        activeText="是"
        inActiveText="否"
        circleBorderWidth={0}
        circleSize={px2dp(40)}
        backgroundActive="#0884E3"
        backgroundInactive="#ddd"
        circleActiveColor="#fff"
        circleInActiveColor="#fff"
        changeValueImmediately
        // renderActiveText
        // renderInActiveText
        {...props}
      />
    );
  }
}

CustomSwitch.propTypes = {
  value: PropTypes.bool,
  activeText: PropTypes.string,
  inActiveText: PropTypes.string,
  onValueChange: PropTypes.func.isRequired,
  showText: PropTypes.bool,
};

CustomSwitch.defaultProps = {
  value: false,
  activeText: '是',
  inActiveText: '否',
  showText: false,
};
